<template>
  <div class="home">
    <van-nav-bar class="home-nav" title="首页" left-text="返回" left-arrow>
      <template #right> </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-search
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />
    <van-tabs v-model="active">
      <van-tab title="首页"></van-tab>
      <van-tab title="家电"></van-tab>
      <van-tab title="手机"></van-tab>
      <van-tab title="食品"></van-tab>
      <van-tab title="生鲜"></van-tab>
      <van-tab title="户外运动"></van-tab>
    </van-tabs>
    <!-- 轮播 -->
    <div class="search-down">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <!-- 手动链接图片 -->
        <van-swipe-item>
          <img
            src="https://img.alicdn.com/imgextra/i3/O1CN01Izoiln1FXD71sCJI7_!!6000000000496-0-tps-520-280.jpg"
          />
        </van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75.jpg_.webp"
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img.alicdn.com/imgextra/i3/O1CN01KjvrIv1Sl28BSYJIv_!!6000000002286-0-tps-520-280.jpg"
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://img.alicdn.com/imgextra/i4/O1CN01WOO0eV26ZevtrA5oq_!!6000000007676-0-tps-520-280.jpg"
        /></van-swipe-item>
        <!-- 后台管理添加的图片 -->
        <!-- <van-swipe-item v-for="item in banners" :key="item.id">
          <img :src="item.coverImage | dalImg" :alt="item.name" />
        </van-swipe-item> -->
      </van-swipe>
    </div>
    <!-- 宫格 -->
    <van-grid :column-num="4">
      <van-grid-item
        v-for="value in categories"
        :key="value.id"
        :icon="value.coverImage | dalImg"
        :text="value.name"
        @click="Gongge(value.id)"
      />
    </van-grid>
    <!-- 商品卡片 -->
    <van-card
      :num="value.amount"
      :tag="index % 2 == 0 ? '热卖' : ''"
      v-for="(value, index) in products"
      :key="Math.random() * 1000 + value"
      :price="value.price.toFixed(2)"
      :title="value.name"
      :origin-price="value.price"
      :thumb="value.coverImage | dalImg"
      @click-thumb="toDetail(value.id)"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import { loadBannersAPI } from "../services/banners";
import { loadCategoriesAPI } from "../services/categories";
import { loadProductsAPI } from "../services/products";
export default {
  name: "Home",
  data() {
    return {
      banners: [],
      categories: [],
      products: [],
      active: 0,
    };
  },
  components: {},
  async created(id) {
    const res = await loadBannersAPI();
    const resCategories = await loadCategoriesAPI();
    const resProducts = await loadProductsAPI(id);
    this.banners = res.data;
    this.categories = resCategories.data;
    this.products = resProducts.data;
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
	async Gongge(id) {
    const resProducts = await loadProductsAPI(id);
	this.products = resProducts.data;
  },
  },
  
};
</script>
<style lang="scss" scoped>
.home {
  .home-nav {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .search-down {
    margin: 10px 10px;
    .my-swipe .van-swipe-item {
      img {
        width: 100%;
        border-radius: 10px;
      }
    }
  }
}
</style>
